
<template>
  <div class="playlist" @click="hide" v-show="showFlag">
    <div class="playlist-wrapper">
      <h2 class='playlist-count'>当前播放({{playList.length}})</h2>
      <div class="playlist-header">
        <i :class="modeIcon" @click.stop='changeMode'></i>
        <h2>{{modeText}}</h2>
        <i class="icon-clear" @click.stop='showConfirm'></i>
      </div>
      <scroll class="playlist-middle" :list='playList'>
        <ul>
          <li v-for="(v,i) in playList" :key="v.mid" @click="changeSong(i)">
            <i :class="[v.mid===currentSong.mid ? 'icon-play':'']"></i>
            <p class='play-item  no-wrap'>{{v.name}}</p>
            <i class="icon-delete" @click.stop='deleteOne(i)'></i>
          </li>
        </ul>
      </scroll>
      <div class="close">
        关闭
      </div>
      <confirm ref="confirm" confirmBtnText='清空' text='是否全部清空' @confirm='deleteAll' />
    </div>
  </div>
</template>

<script>
import Confirm from 'components/base/Confirm'
import Scroll from 'components/base/Scroll'
import { mapState } from 'vuex'
export default {
  components: { Confirm, Scroll },

  data() {
    return {
      showFlag: false,
      modeText: '',
      modeIcon: ''
    }
  },
  computed: {
    ...mapState(['mode', 'playList', 'currentSong', 'currentIndex'])
  },
  created() {
    this.originIcon(this.mode)
  },
  watch: {
    mode(val) {
      this.originIcon(val)
    }
  },
  methods: {
    showConfirm() {
      this.$refs.confirm.show()
    },
    originIcon(mode) {
      switch (mode) {
        case 0:
          this.modeIcon = 'icon-sequence'
          this.modeText = '顺序播放'
          break
        case 1:
          this.modeIcon = 'icon-loop'
          this.modeText = '单曲播放'
          break
        case 2:
          this.modeIcon = 'icon-random'
          this.modeText = '随机播放'
          break
      }
    },
    hide() {
      this.showFlag = false
    },
    show() {
      this.showFlag = true
    },
    changeSong(i) {
      this.$store.commit('setCurrentIndex', i)
    },
    changeMode() {
      this.$emit('changeMode')
    },
    deleteOne(i) {
      let list = JSON.parse(JSON.stringify(this.playList))
      list.splice(i, 1)
      const commit = this.$store.commit
      if (i < this.currentIndex) {
        commit('setCurrentIndex', this.currentIndex - 1)
      } else if (i === list.length && !i) {
        commit('setCurrentIndex', 0)
      }
      if (!list.length) {
        this.deleteAll()
      }
      commit('setSequenceList', list)
      commit('setPlayList', list)
    },
    deleteAll() {
      this.$router.back()
      this.hide()
      const commit = this.$store.commit
      commit('setCurrentIndex', -1)
      commit('setSequenceList', [])
      commit('setPlayList', [])
      commit('setPlaying', false)
      commit('setCurrentSong', {})
    }
  }
}
</script>

<style scoped>
.playlist {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}
.playlist-count {
  line-height: 30px;
}
.playlist i {
  color: var(--color-theme);
}
.playlist-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background-color: #333;
  padding: 10px 20px 20px;
  border-radius: 20px 20px 0 0;
}
.playlist-header {
  display: flex;
  align-items: center;
  color: var(--color-theme);
  height: 30px;
  position: relative;
}
.playlist-header h2 {
  width: 200px;
  margin-left: 8px;
}
.play-item {
  width: 290px;
  font-size: 14px;
  color: var(--color-rgba3);
  margin-left: 24px;
}
.playlist-header .icon-clear {
  position: absolute;
  right: 0;
}
.playlist-middle {
  position: absolute;
  top: 70px;
  bottom: 60px;
  right: 0;
  left: 0;
  padding: 0 20px;
  height: 360px;
  overflow: hidden;
}
.playlist-middle li {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 30px;
  height: 30px;
}
.icon-play {
  position: absolute;
  left: 0;
}

.playlist-middle .icon-delete {
  position: absolute;
  right: 0;
}
.close {
  position: absolute;
  bottom: 0;
  text-align: center;
  line-height: 60px;
  height: 60px;
  left: 0;
  right: 0;
  background-color: #222;
}
</style>